<template>
    <el-row class="cloud-header">
      <el-col :span="4"><img src="../../assets/danlu.png" alt=""></el-col>
      <el-col :span="4" class="header-item" @click="RouterGo()">
        <div @click="RouterGo('/home')">首页</div>
      </el-col>
      <el-col :span="4" class="header-item" @click="RouterGo()">
        <div @click="RouterGo('/taskCenter')">任务中心</div>
      </el-col>
      <el-col :span="4" class="header-item" >
        <div @click="RouterGo('/CreateTest')">发起任务</div>
      </el-col>
      <el-col :span="4" class="header-item" @click="RouterGo()">
        <div @click="RouterGo('/multTask')">组合任务</div>
      </el-col>
      <el-col :span="4" class="header-item">
        <div @click="logout()">欢迎您：Caroline</div></el-col>
    </el-row>
</template>

<script>
export default {
  name: 'Header',
  components: {
  },
  data:function(){
    var data = {
        
      }
      return data
  },
  methods:{
    RouterGo : function(router){
      this.$router.push(router);
    },
    logout : function(){
      this.$store.commit('logout')
    }
  }
}
</script>

<style lang="less">
  .cloud-header{
    background: #f8f8f8;
    line-height:64px;
    border-bottom:1px solid lightgray;
    .header-item:hover{
      background : lightblue;
      color:white;
    }
  }
</style>
